import { useState, useEffect } from 'react'
import { Heart, MessageCircle, Eye } from 'lucide-react'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'

interface Post {
  id: number
  title: string
  content: string
  author: {
    id: number
    username: string
    avatar?: string
  }
  category: {
    id: number
    name: string
    color: string
  }
  views: number
  likes: number
  replies: number
  createdAt: string
  isHot: boolean
}

export default function Home() {
  const [posts, setPosts] = useState<Post[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 模拟数据
    const mockPosts: Post[] = [
      {
        id: 1,
        title: "《塞尔达传说：王国之泪》全神庙攻略分享",
        content: "分享王国之泪中所有神庙的通关技巧和隐藏要素...",
        author: {
          id: 1,
          username: "塞尔达大师",
          avatar: "/api/placeholder/40/40"
        },
        category: {
          id: 1,
          name: "主机游戏",
          color: "bg-red-500"
        },
        views: 15420,
        likes: 892,
        replies: 156,
        createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
        isHot: true
      },
      {
        id: 2,
        title: "《原神》4.7版本新角色强度分析",
        content: "详细分析新角色的技能机制和配队建议...",
        author: {
          id: 2,
          username: "原神攻略组",
          avatar: "/api/placeholder/40/40"
        },
        category: {
          id: 2,
          name: "手游",
          color: "bg-green-500"
        },
        views: 8932,
        likes: 445,
        replies: 89,
        createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(),
        isHot: true
      },
      {
        id: 3,
        title: "《艾尔登法环》DLC黄金树幽影发售日期确定！",
        content: "万代南梦宫正式公布DLC发售日期和预购信息...",
        author: {
          id: 3,
          username: "魂系玩家",
          avatar: "/api/placeholder/40/40"
        },
        category: {
          id: 1,
          name: "主机游戏",
          color: "bg-red-500"
        },
        views: 25678,
        likes: 1203,
        replies: 234,
        createdAt: new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString(),
        isHot: true
      }
    ]
    
    setTimeout(() => {
      setPosts(mockPosts)
      setLoading(false)
    }, 1000)
  }, [])

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 py-8">
          <div className="animate-pulse">
            <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
            <div className="space-y-4">
              {[1, 2, 3].map(i => (
                <div key={i} className="bg-white p-6 rounded-lg shadow">
                  <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                  <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold text-gray-900">游戏论坛</h1>
            <div className="flex items-center space-x-4">
              <button className="btn-primary">发布帖子</button>
              <button className="btn-secondary">登录</button>
            </div>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* Sidebar */}
          <aside className="lg:col-span-1">
            <div className="card mb-6">
              <h3 className="font-semibold mb-4">版块分类</h3>
              <div className="space-y-2">
                <a href="#" className="block px-3 py-2 rounded-lg bg-red-50 text-red-700">主机游戏</a>
                <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">PC游戏</a>
                <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">手游</a>
                <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">独立游戏</a>
              </div>
            </div>
          </aside>

          {/* Main Content */}
          <main className="lg:col-span-3">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-xl font-semibold">热门讨论</h2>
              <select className="px-4 py-2 border rounded-lg">
                <option>最新发布</option>
                <option>最多回复</option>
                <option>最多点赞</option>
              </select>
            </div>

            <div className="space-y-4">
              {posts.map(post => (
                <article key={post.id} className="card hover:shadow-lg transition-shadow">
                  <div className="flex items-start space-x-4">
                    <img 
                      src={post.author.avatar || '/api/placeholder/48/48'} 
                      alt={post.author.username}
                      className="w-12 h-12 rounded-full"
                    />
                    <div className="flex-1">
                      <div className="flex items-center space-x-2 mb-2">
                        <span className={`px-2 py-1 text-xs text-white rounded ${post.category.color}`}>
                          {post.category.name}
                        </span>
                        {post.isHot && (
                          <span className="px-2 py-1 text-xs bg-orange-100 text-orange-800 rounded">
                            热门
                          </span>
                        )}
                      </div>
                      <h3 className="text-lg font-semibold mb-2 hover:text-primary cursor-pointer">
                        {post.title}
                      </h3>
                      <p className="text-gray-600 mb-3 line-clamp-2">{post.content}</p>
                      <div className="flex items-center justify-between text-sm text-gray-500">
                        <div className="flex items-center space-x-4">
                          <span>{post.author.username}</span>
                          <span>{formatDistanceToNow(new Date(post.createdAt), { locale: zhCN })}前</span>
                        </div>
                        <div className="flex items-center space-x-4">
                          <span className="flex items-center space-x-1">
                            <Eye className="w-4 h-4" />
                            <span>{post.views}</span>
                          </span>
                          <span className="flex items-center space-x-1">
                            <Heart className="w-4 h-4" />
                            <span>{post.likes}</span>
                          </span>
                          <span className="flex items-center space-x-1">
                            <MessageCircle className="w-4 h-4" />
                            <span>{post.replies}</span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </main>
        </div>
      </div>
    </div>
  )
}
